import React from 'react'
import { Card, Button, Icon, Radio } from 'antd';
import axios from './../../axios'
import Utils from './../../utils/utils'
import BaseForm from './../../components/BaseForm'

class BikeMAP extends React.Component {

    state = {}
    map = ''
    formList = [
        {
            type: 'SELECT',
            label: '城市',
            width: 80,
            placeholder: '全部',
            list: [{id: 0, name: '北京'},{id: 1, name: '上海'},{id: 2, name: '天津'},{id: 3, name: '杭州'}]
        },{
            type: '时间查询'
        },{
            type: 'SELECT',
            label: '订单状态',
            width: 120,
            placeholder: '全部',
            list: [{id: 0, name: '全部'},{id: 1, name: '进行中'},{id: 2, name: '行程结束'}]
        }
    ]
    

    requestList=() => {
        axios.ajax({
            url: '/map/bike_list',
            data: {
                params: this.params
                //这里的params 就是底下已经获取到的值 this.params = filterParams; 不需要存在state中， 因为只要存在state中 就会渲染render
            }
        }).then((res)=> {
            if(res.code == 0) {
                this.setState({
                    total_count: res.result.total_count
                })
                this.renderMap(res)
            }
        })
    }
    componentWillMount() {
        this.requestList();
    }
    //1.给子元素传过去的方法
    handleFilterSubmit =(filterParams)=> {
        this.params = filterParams;
        this.requestList()
    }
    //2. 绘制地图数据
    renderMap=(res) => {
        let list = res.result.route_list;
        this.map = new window.BMap.Map('container')
        let gps1 = list[0].split(',');
        let startPoint = new window.BMap.Point(gps1[0], gps1[1])
        let gps2 = list[list.length-1].split(',');
        let endPoint = new window.BMap.Point(gps2[0], gps2[1])
        this.map.centerAndZoom(endPoint, 11)

        let startPointIcon = new window.BMap.Icon('./assets/start_point.png', new window.BMap.Size(36,42), {
            imageSize: new window.BMap.Size(36, 42),
            anchor: new window.BMap.Size(18,42)
        })
        //2.1将图片放到地图上
        let bikeMarkerStart = new window.BMap.Marker(startPoint, {icon: startPointIcon})
        this.map.addOverlay(bikeMarkerStart)
        let endPointIcon = new window.BMap.Icon('./assets/end_point.png', new window.BMap.Size(36,42), {
            imageSize: new window.BMap.Size(36, 42),
            anchor: new window.BMap.Size(18,42)
        })
        let bikeMarkerend = new window.BMap.Marker(endPoint, {icon: endPointIcon})
        this.map.addOverlay(bikeMarkerend)

        //2.2绘制行驶路线
        let routeList = [];
        list.forEach((item)=>{
            let p = item.split(',');
            routeList.push(new window.BMap.Point(p[0], p[1]))
        })

        let polyLine = new window.BMap.Polyline(routeList, {
            strokeColor: 'red',
            strokeWeight: 2,
            strokeOpacity: 1
        })
        this.map.addOverlay(polyLine)

        //2.3绘制服务区
        let servicePointList = [];
        let serviceList = res.result.service_list;
        serviceList.forEach((item)=>{
            servicePointList.push(new window.BMap.Point(item.lon, item.lat))
        })
        let polyServiceLine = new window.BMap.Polyline(servicePointList, {
            strokeColor: 'red',
            strokeWeight: 3,
            strokeOpacity: 1
        })
        this.map.addOverlay(polyServiceLine)

         // 2.4添加地图中的自行车
         let List = res.result.bike_list;
         let bikeIcon = new window.BMap.Icon("/assets/bike.jpg", new window.BMap.Size(36, 42), {
             imageSize: new window.BMap.Size(36, 42),
             anchor: new window.BMap.Size(18, 42)
         });
         List.forEach((item) => {
             let p = item.split(",");
             let point = new window.BMap.Point(p[0], p[1]);
             var bikeMarker = new window.BMap.Marker(point, { icon: bikeIcon });
             this.map.addOverlay(bikeMarker);
         })

         // 2.5添加地图控件
        this.addMapControl();
    }

    // 添加地图控件
    addMapControl = () => {
        let map = this.map;
        // 左上角，添加比例尺
        var top_right_control = new window.BMap.ScaleControl({anchor: window.BMAP_ANCHOR_TOP_RIGHT});
        var top_right_navigation = new window.BMap.NavigationControl({anchor: window.BMAP_ANCHOR_TOP_RIGHT});
        //添加控件和比例尺
        map.addControl(top_right_control);
        map.addControl(top_right_navigation);
        map.enableScrollWheelZoom(true);
        // legend.addLegend(map);
    };

 
    render() {
        return (
            <div>
               <Card >
                   <BaseForm formList={this.formList} filterSubmit={this.handleFilterSubmit} />
               </Card>
               <Card>
                   <div>共{this.state.total_count}辆车</div>
                   <div id="container" style={{height: 500}}></div>
               </Card>
            </div>
        )
    }
}


export default BikeMAP